<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入主题样式 -->
<link href="themes/gray/easyui.css" rel="stylesheet">
<!-- 引入图标的样式 -->
<link href="themes/icon.css" rel="stylesheet">
<!-- 先引入jquery -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<!-- 引入easyui -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
$(function(){
	//创建最新入库知识表
 	$('#dgin').datagrid({    
	    url:'dgnew.do',
	    title:'最新入库知识',
	    striped:true,
	    rownumbers:true,
	    showHeader:false,
	    singleSelect:true,
	    columns:[[
	        {field:'cid',title:'cid',hidden:true,width:100},    
	        {field:'ctitle',title:'ctitle',width:'100%'},    
	    ]],
	    onLoadSuccess:function(){
	    	$('#win').window('close');
	    },
	  	//双击单元格就去加载数据
	    onDblClickCell:function(index,field,value){
	    	//返回所选行的对象
	    	var op = $('#dgin').datagrid('getSelected');
	    	//通过所选行对象拿到cid
	    	var ccontent = op.ccontent;
	    	var cid = op.cid;
	    	//$('#win').window('open');
	    	//$.getContent(ccontent);
			location.href="details.do?cid="+cid;
			console.log(cid)
	    	addNumber(op.cid);
	    	
	    }
	    
	});
 	//创建热门搜索表
 	$('#dghot').datagrid({    
	    url:'dghot.do',
	    title:'热门搜索 ',
	    striped:true,
	    rownumbers:true,
	    showHeader:false,
	    singleSelect:true,
	    columns:[[
	        {field:'cid',title:'cid',hidden:true,width:100},    
	        {field:'ctitle',title:'ctitle',width:'100%'},    
	    ]],
	    onLoadSuccess:function(){
	    	$('#win').window('close');
	    },
	    //双击单元格就去加载数据
	    onDblClickCell:function(index,field,value){
	    	//返回所选行的对象
	    	var op = $('#dghot').datagrid('getSelected');
	    	//通过所选行对象拿到cid
	    	var ccontent = op.ccontent;
	    	var cid = op.cid;
	    	//$('#win').window('open');
	    	//$.getContent(ccontent);
	    	location.href="details.do?cid="+cid;
	    	addNumber(op.cid);
	    }
	    
	});
 	//为页面加入为本内容
 	$.getContent=function(value){
		 $('#content').text(value);		
 	}
 	//创建最新浏览表
 	$('#dglook').datagrid({    
	    url:'dglook.do',
	    title:'最新浏览',
	    striped:true,
	    rownumbers:true,
	    showHeader:false,
	    singleSelect:true,
	    columns:[[
			{field:'cid',title:'cid',hidden:true,width:100},    
			{field:'ctitle',title:'ctitle',width:'100%'},    
	    ]],
	    onDblClickCell:function(index,field,value){
	    	//返回所选行的对象
	    	var op = $('#dglook').datagrid('getSelected');
	    	//通过所选行对象拿到cid
	    	var ccontent = op.ccontent;
	    	var cid = op.cid;
	    	//$('#win').window('open');
	    	//$.getContent(ccontent);
	    	location.href="details.do?cid="+cid;
	    	addNumber(op.cid);
	    }
	});
 	//搜索的类型的下拉列表
 	$('#combox').combobox({    
 		onSelect:function(record){
 			
 			
 		}
 	});
 	
	function seach(combo,svalues){
		
		
	}
 	
	//查询按钮
 	$('#btn').linkbutton({    
 		  onClick:function(){
 			var combo = $('#combox').combobox('getValue');
 			var svalues = $('#search').val();
 			seach(combo,svalues);
 	      }
 	});
	
 	//显示知识内容的面板
 	$('#win').window({    
 	    width:'90%',    
 	    height:'90%',
 	    title:'知识内容',
 	    modal:true,
 	    closed:true,
 	    shadow:true
 	}); 
 	
 	var websocket = null;
	//判断当前浏览器是否支持WebSocket
	if ('WebSocket' in window) {
		websocket = new WebSocket("ws://172.18.23.26:8080/project/websocket");
	} else {
		alert('当前浏览器 Not support websocket')
	}

	//接收到消息的回调方法
	websocket.onmessage = function(event) {
		hangye(event.data)

	}

	function hangye(val){
		var $sock=$('<div style="width: 100px; height: 50px; background-color: red; position: absolute; ">'+val+'</div>');
		$('#sock').append($sock);
		
		$sock.animate({
			left : '300px'
		},5000,function(){
			
			$sock.remove();
		});
	}
	
	function addNumber(number){
		
		$.ajax({
			url:'addNumber.do',
			type:'post',
			data:{'number':number},
			dataType:'json',
			success:function(){
				
			}
		})
		
	}
	
	
	$.ajax({
		url:'link.do',
		type:'post',
		data:{},
		dataType:'json',
		success:function(data){
			for(var i=0; i < data.length; i++){
				$('#link').append("<div style='margin-left: 5px; margin-top: 2px;'><a name='at' href="+data[i].wlink+">"+data[i].wname+"</a><div>");
				$("a").css('text-decoration','none');
			} 
		}
	})
});
</script>
<body>
<div id="cc" class="easyui-layout" style="width: 100%;height: 100%;">   
   
	<div data-options="region:'east',iconCls:'icon-reload',split:false" style="width: 28%;">
		<div class="easyui-layout" style="width:100%;height:100%;">   
    		<div id="thematic" data-options="region:'north',title:'专题知识库',split:true" style="height:35%; ">
    			<div style="width: 50px; height: 50px; background-color: red; margin-top: 20px; margin-left: 10px; position: absolute; "><image style="width: 50px; height: 50px; " src="picture/a.jpg"></image></div>
    			<div style="width: 50px; height: 50px; background-color: red; margin-top: 20px; margin-left: 80px; position: absolute; "><image style="width: 50px; height: 50px; " src="picture/b.jpg"></image></div>
    			<div style="width: 50px; height: 50px; background-color: red; margin-top: 20px; margin-left: 150px; position: absolute; "><image style="width: 50px; height: 50px; " src="picture/c.jpg"></image></div>
    			<div style="width: 50px; height: 50px; background-color: red; margin-top: 20px; margin-left: 220px; position: absolute; "><image style="width: 50px; height: 50px; " src="picture/d.jpg"></image></div>
    			
    			<div style="width: 50px; height: 30px; background-color: ; margin-top: 80px; margin-left: 10px; position: absolute; "><a name="at" href="#">总量控制</a></div>
    			<div style="width: 50px; height: 30px; background-color: ; margin-top: 80px; margin-left: 80px; position: absolute; "><a name="at" href="#">环境影响评价</a></div>
    			<div style="width: 50px; height: 30px; background-color: ; margin-top: 80px; margin-left: 150px; position: absolute; "><a name="at" href="#">监察执法</a></div>
    			<div style="width: 50px; height: 30px; background-color: ; margin-top: 80px; margin-left: 220px; position: absolute; "><a name="at" href="#">环境监测</a></div>
    			
    			<div style="width: 50px; height: 50px; background-color: red; margin-top: 150px; margin-left: 10px; position: absolute; "><image style="width: 50px; height: 50px; " src="picture/e.jpg"></image></div>
    			<div style="width: 50px; height: 50px; background-color: red; margin-top: 150px; margin-left: 80px; position: absolute; "><image style="width: 50px; height: 50px; " src="picture/f.jpg"></image></div>
    			<div style="width: 50px; height: 50px; background-color: red; margin-top: 150px; margin-left: 150px; position: absolute; "><image style="width: 50px; height: 50px; " src="picture/g.jpg"></image></div>
    			<div style="width: 50px; height: 50px; background-color: red; margin-top: 150px; margin-left: 220px; position: absolute; "><image style="width: 50px; height: 50px; " src="picture/h.jpg"></image></div>
    			
    			<div style="width: 50px; height: 30px; background-color: ; margin-top: 210px; margin-left: 10px; position: absolute; "><a name="at" href="#">污染防治</a></div>
    			<div style="width: 50px; height: 30px; background-color: ; margin-top: 210px; margin-left: 80px; position: absolute; "><a name="at" href="#">环境应急</a></div>
    			<div style="width: 50px; height: 30px; background-color: ; margin-top: 210px; margin-left: 150px; position: absolute; "><a name="at" href="#">自然生态</a></div>
    			<div style="width: 50px; height: 30px; background-color: ; margin-top: 210px; margin-left: 220px; position: absolute; "><a name="at" href="#">核与辐射安全</a></div>
    			
    		</div>   
    		<div id="link" data-options="region:'south',title:'相关链接',split:true" style="height:30%;">
				
    		</div>   
    		<div id="sock" data-options="region:'center',title:'行业动态'" style="height:35%;">
    			
    		</div>   
		</div> 
	</div>
    <div data-options="region:'center'" style="padding:0px;background:#eee; ">
    		<div style="height: 34%; ">
				<table id="dgin"></table>
			</div>
			
			<div  style="height: 34%; ">
				<table id="dghot"></table>
			</div>
			
			<div>
				<table id="dglook"></table>
			</div>
			
			<div id="win">
				<div style="width: 500px; height: 500px; background-color: ; ">
					<p id="content"></p>
				</div>
			</div>
    </div>   
</div>
</body>
</html>